<template>
  <el-form ref="form" :model="form" label-width="180px">
    <el-divider content-position="left"><h4>微信小程序</h4></el-divider>
    <el-alert :closable="false" :title="`请到微信公众平台后台配置request合法域名: ${form.wxMiniServerUrl}`" type="info" center/>
    <el-form-item label="微信开放平台">
      <el-button size="small" type="primary" @click="loadAuthImage">授权第三方</el-button>
    </el-form-item>
    <el-form-item label="小程序AppId">
      <el-input v-model="form['appId']"/>
    </el-form-item>
    <el-form-item label="小程序Secret">
      <el-input v-model="form['appSecret']"/>
    </el-form-item>
    <el-divider content-position="left"><h4>QQ小程序</h4></el-divider>
    <el-form-item label="小程序AppId">
      <el-input v-model="form['qqAppId']"/>
    </el-form-item>
    <el-form-item label="小程序Secret">
      <el-input v-model="form['qqAppSecret']"/>
    </el-form-item>
    <el-divider content-position="left"><h4>微信支付</h4></el-divider>
    <el-form-item label="IOS支付开关">
      <el-switch v-model="form['canIosPay']"/>
    </el-form-item>
    <el-form-item label="微信支付商户号">
      <el-input v-model="form['mchId']"/>
    </el-form-item>
    <el-form-item label="微信支付Api密钥">
      <el-input v-model="form['mchKey']"/>
    </el-form-item>
    <el-form-item label="微信支付apiclient_cert.pem">
      <el-input v-model="form['paymentCert']" :rows="4" type="textarea"/>
    </el-form-item>
    <el-form-item label="微信支付apiclient_key.pem">
      <el-input v-model="form['paymentKey']" :rows="4" type="textarea"/>
    </el-form-item>
    <el-divider content-position="left"><h4>微信其他配置</h4></el-divider>
    <el-form-item label="小程序上传密钥">
      <el-input v-model="form['wxMiniUploadKey']" :rows="4" type="textarea"/>
    </el-form-item>
    <el-form-item label="小程序服务商关联票据">
      <el-input v-model="form['wxServiceProviderTicket']" :rows="2" type="textarea"/>
      <el-alert :closable="false" type="info">
        非必填，若要关联小程序服务商请根据操作说明获取票据，
        <el-link :underline="false"
                 href="https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/Before_Develop/customized_service_platform_guidelines.html"
                 type="primary" style="font-size: 12px;">票据获取说明
        </el-link>
      </el-alert>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="bg-green" @click="submitForm('form')">提交</el-button>
    </el-form-item>
    <el-dialog :visible.sync="authCodeDialogVisible" :modal-append-to-body="false" width="392px">
      <div class="iframe">
        <div class="iframe-content">
          <iframe ref="authIframe" :src="authImage" frameborder="0" @load="listenerAuthIframe"/>
        </div>
      </div>
    </el-dialog>
  </el-form>
</template>

<script>
  export default {
    data() {
      return {
        form: {},
        authCodeDialogVisible: false,
        authImage: ''
      }
    },
    created() {
      this.getSiteConfig();
    },
    methods: {
      getSiteConfig() {
        const url = '../videoAdmin/setting/getDataList'
        const data = {
          type: 'configs'
        }
        this.$store.dispatch('GetConnect', {url, data}).then(res => {
          this.form = res.data;
          this.form.carouselStatus = this.form.carouselStatus === 1;
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },
      // 获取授权二维码
      loadAuthImage() {
        const url = '../videoAdmin/wxOpen/getAuthorizationUrl';
        const data = {url: '/videoBlogger/config'};
        this.$store.dispatch('GetConnect', {url, data}).then(res => {
          this.authCodeDialogVisible = true;
          this.authImage = res.data['authUrl'];
          this.isLoadAuthIframe = false;
        }).catch(e => {
          this.$message.error(e.msg)
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const url = '../videoAdmin/setting/updateData'
            const data = Object.assign({}, this.form)
            data.carouselStatus = data.carouselStatus ? 1 : 0
            data.type = 'configs'
            this.$store.dispatch('GetConnect', {url, data}).then(res => {
              this.$message.success(res.msg)
              this.getSiteConfig()
            }).catch(e => {
              this.$message.error(e.msg)
            })
          } else {
            this.$message.error('提交失败,请检查必填项')
          }
        })
      },
      // 监听授权iframe跳转
      listenerAuthIframe() {
        const iframe = this.$refs.authIframe;
        if (this.$validate.isEmpty(iframe)) {
          return;
        }
        if (!this.isLoadAuthIframe) {
          this.isLoadAuthIframe = true;
          return;
        }
        window.location.reload();
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../../styles/index.scss';

  .el-form {
    max-width: 900px;
  }

  .iframe {
    display: block;
    width: 352px;
    height: 413px;
    border: 1px solid #666666;
    border-radius: 5px;
    overflow: hidden;

    .iframe-content {
      width: 100%;
      height: 413px;
      overflow: hidden;
      position: relative;

      iframe {
        width: 1350px;
        height: 1000px;
        position: absolute;
        left: -500px;
        top: -80px;
      }
    }
  }
</style>
